<template>
	<view class="goodsPage">
		<!-- <view class="goodsImgBox">
			<imageSwiper class="goodsImg" :imgs="dataInfo.integralCommodity.commodityFile"></imageSwiper>
		</view> -->
		<view class="goodsContent">
			<!-- 	<view class="goodsTitle">
				<view class="title u-line-1">{{dataInfo.comuponName}}</view>
				<view class="right">
					<image class="img" src="@/static/common/business.png" mode="scaleToFill"></image>
					<text>{{dataInfo.integralCommodity.businessName}}</text>
				</view>
			</view> -->
			<!-- <view class="goodsRange">
				<view class="addressText">鳌江镇xx社区xx路xx号</view>
				<view class="distanceText">距离1.2km</view>
			</view> -->
			<!-- 	<view class="goodsPriceRow">
				<view class="goodsPrice">结束时间：{{dataInfo.effectiveFinishTime}}</view>
			</view>
			<view class="goodsDescribe">{{dataInfo.remark}}</view> -->
			<view class="couponContentBox">
				<couponItem :dataItem="dataInfo" nameKey="comuponName" :rightBtn="false">
				</couponItem>
			</view>
			<view class="submitBtnBox">
				<view class="submitBtn" @click="openExchange()">确认核销</view>
			</view>
		</view>
		<u-popup :show="volumeShow" @close="volumeClose" @open="volumeOpen" mode="bottom" :round="10">
			<view>
				<view class="titleBox">
					<view class="left">
						<view class="cText" @click="confirmVolume">确定</view>
					</view>
					<view class="center">
						<view class="title">优惠券</view>
					</view>
					<view class="right">
						<view class="closeText" @click="closeVolume">关闭</view>
					</view>
				</view>
				<view class="volumeContent">
					<view v-for="(item,index) in dataList.rows" :key="index" @click="changeVolume(item)">
						<couponItem :dataItem="item" nameKey="comuponName" :rightBtn="false"
							:active="volumeIdIng==item.volumeId">
						</couponItem>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="modalShow" :title="modalOptions.title" :confirmText="modalOptions.onfirmText"
			:cancelText="modalOptions.cancelText" :cancelColor="modalOptions.cancelColor" showCancelButton
			:confirmColor="modalOptions.confirmColor" @confirm="modalconfirm" @cancel="closeDialog"
			@close="closeDialog">
			<view class="Modal-slot-content">
				<view class="modalContent">{{modalOptions.content}}</view>
				<u-form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm" labelWidth="100rpx">
					<u-form-item label="核销备注" prop="writeOffRemark" required>
						<u--input v-model="userInfo.writeOffRemark"></u--input>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import * as exchangeApi from "@/api/exchange.js"
	import * as goodsApi from "@/api/goods.js"
	import * as systemApi from "@/api/system.js"
	import * as vouchersApi from "@/api/vouchers.js"
	export default {
		data() {
			return {
				infoId: '',
				userId: '',
				//模态框
				modalShow: false,
				//模态框确认方法
				callback: () => {},
				//当前模态框名字
				now_modalShow: '',
				modalOptions: {
					content: '',
					title: '注意',
					onfirmText: '确认',
					confirmColor: '#1977E1',
					cancelText: '取消'
				},
				rules: {
					writeOffRemark: {
						type: 'string',
						required: true,
						message: '请填写核销备注',
						trigger: ['blur', 'change']
					}
				},
				dataInfo: {
					integralCommodity: {
						commodityFile: '',
						commodityName: '',
						integral: '',
						remark: '',
					},
					businessId: 0,
					businessName: "",
					commodityFile: "",
					commodityId: 1,
					commodityName: "",
					commodityStatus: "",
					commodityType: "",
					commodityTypeName: "",
					createBy: null,
					createTime: "",
					exchange: 0,
					inventory: "",
					isRecommend: "",
					redeemPoints: 0,
					remark: "",
					updateBy: null,
					updateTime: "",
				},
				dataList: {
					records: [],
					rows: [],
					pages: 0,
					pageSize: 10,
					total: 0,
					pageNum: 1
				},
				volumeShow: false,
				volumeId: '',
				volumeIdIng: '',
				volumeInfoIng: {},
				volumeInfo: {},
				userInfo: {
					userId: '',
					writeOffRemark: ''
				},
				businessInfo: {
					businessId: '',
					integralBusiness: {
						businessName: ''
					}
				}
			};
		},
		async onLoad(options) {
			console.log(options);
			//优惠券Id
			this.infoId = options.vid
			this.userId = options.uid

			this.getInfo()
			this.dictData('commodity_type')
			this.businessInfo = await this.$store.getters.businessInfo
			if (!this.businessInfo.businessId) {
				await this.$store.dispatch('userBaseInfo').then(res => {
					this.businessInfo = res.businessInfo
				})
			}
		},
		methods: {
			openVolume() {
				if (this.dataList.total < 1) {
					return
				}
				this.volumeShow = true
			},
			volumeOpen() {
				this.volumeIdIng = this.volumeId
				this.volumeInfoIng = this.volumeInfo

			},
			closeVolume() {
				this.volumeShow = false
			},
			confirmVolume() {
				this.volumeId = this.volumeInfoIng.volumeId
				this.volumeInfo = this.volumeInfoIng
				this.volumeShow = false
			},
			changeVolume(item) {
				if (item.volumeId == this.volumeIdIng) {
					this.volumeIdIng = ''
					this.volumeInfoIng = {}
				} else {
					this.volumeIdIng = item.volumeId
					this.volumeInfoIng = item
				}
			},
			openExchange() {
				const that = this
				that.modalOptions.content = `确认核销吗？`
				// that.callBack = () => {
				// 	that.vouchersexchange()
				// }
				that.openDialog()
			},
			//打开弹窗
			openDialog(openShow = 'modal') {
				this.now_modalShow = openShow
				this[openShow + 'Show'] = true
			},
			//关闭弹窗
			closeDialog() {
				this[this.now_modalShow + 'Show'] = false
				this.callback = () => {}
				//this.modalOptions = { ...modalOptions }
			},
			//弹窗确认触发
			modalconfirm() {
				this.$refs.uForm.validate().then(res => {
					this.writeOff()
				}).catch(errors => {})
				// this.clearSearch()
			},
			writeOff() {
				const that = this
				uni.$u.throttle(() => {
					exchangeApi.volumeWriteOff(that.dataInfo.volumeId, this.userId, that.userInfo.writeOffRemark)
						.then(res => {
							that.$toast1('核销成功', setTimeout(() => {
								that.closeDialog()
								// that.$navTo('pages/Merchant/Merchant', {}, 'reLaunch')
							}, 600))
						}).catch(that.closeDialog())
				}, 600)
			},
			dictData(dictType) {
				systemApi.dictDataList(dictType).then(res => {
					console.log(res);
				})
			},
			getInfo() {
				exchangeApi.welfareVolume(this.infoId).then(({
					data
				}) => {
					this.dataInfo = data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F4F7FF;
	}

	.modalContent {
		text-align: center;
		margin: 20rpx 0;
	}

	.titleBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		height: 80rpx;
		padding: 0 30rpx;

		.left {
			.cText {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #0138D2;
			}
		}

		.center {
			flex: 1;

			.title {
				text-align: center;
			}
		}

		.right {
			.closeText {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #919191;
			}
		}
	}

	.volumeContent {
		max-height: 80vh;
		min-height: 40vh;
		width: 100%;
		background-color: #F4F7FF;
		padding: 30rpx;
		box-sizing: border-box;


	}

	.goodsPage {
		padding-top: 30rpx;

		.goodsImgBox {
			margin-bottom: 30rpx;

			.goodsImg {
				width: 100%;
				height: 400rpx;
				object-fit: cover;
			}
		}

		.goodsContent {
			padding: 0 30rpx;

			.goodsTitle {
				font-size: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 40rpx;
					color: #000000;
				}

				.right {
					flex-shrink: 0;
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;

					.img {
						width: 40rpx;
						height: 40rpx;
						object-fit: cover;
					}

				}
			}

			.goodsRange {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 28rpx;

				.addressText {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.distanceText {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #0138D2;
				}
			}

			.goodsPriceRow {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 30rpx;
			}

			.volumeRow {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FF0000;
				display: flex;
				align-items: center;
				flex-shrink: 0;
			}

			.goodsPrice {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FF0000;
			}

			.goodsDescribe {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.submitBtnBox {
				height: 130rpx;
				width: 100%;

				.submitBtn {
					position: absolute;
					bottom: 40rpx;
					left: 0;
					right: 0;
					margin: auto;
					box-sizing: border-box;
					width: calc(100% - 128rpx - 128rpx);
					display: flex;
					justify-content: center;
					align-items: center;
					width: 494rpx;
					height: 88rpx;
					background: linear-gradient(90deg, #5F96E8 0%, #1977E1 100%);
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}
</style>